<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--设备数据-->
			<el-col :span="24" :xs="24">
				<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
					label-width="68px">
					<el-form-item label="设备" prop="device">
						<el-select v-model="queryParams.type" placeholder="设备类型" clearable style="width: 240px">
							<el-option v-for="(type) in types" :key="type.value" :label="type.label"
								:value="type.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
						<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
					</el-form-item>
				</el-form>

				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
							@click="handleUpdateBatch">批量删除</el-button>
						<el-button type="success" plain icon="el-icon-add" size="mini"
							@click="handleAdd">新增任务</el-button>
					</el-col>
					<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"
						:columns="columns"></right-toolbar>
				</el-row>

				<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50" align="center" />

					<!-- 遍历 clumns 定义列 -->
					<el-table-column v-for="column in columns" :key="column.key" :label="column.label"
						:prop="column.prop" align="center" v-if="column.visible" :show-overflow-tooltip="true"
						:sortable="column.sortable">
						<!-- 使用 slot-scope 来根据列类型进行不同的处理 -->
						<template slot-scope="scope">
							{{ scope.row[column.prop] }}
						</template>
					</el-table-column>


					<el-table-column label="任务管理" align="center" min-width="160" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<div>
								<el-button size="mini" type="primary" icon="el-icon-edit"
									@click="handleUpdate(scope.row)">修改</el-button>
								<el-button size="mini" type="danger" icon="el-icon-delete"
									@click="handleDelete(scope.row)">删除</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" />
				<!-- @pagination="getList" -->
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";

	// 引入JOSN结构
	import {
		types
	} from '@/structure/common.js';
	import {
		columns
	} from '@/structure/job.js';

	export default {
		name: "User",
		data() {
			return {
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 10,

				// 查询参数
				queryParams: {
					type: "charger",
					pageNum: 1,
					pageSize: 10,
				},
				types: types,
				// 列信息
				columns: columns,
				// 设备表格数据
				dataList: [{
						"sn": "sn-0001",
						"jobCycle": "单次",
						"timePointPeriod": "00:00:00 - 00:00:00",
						"cycleDate": "2024-7-14 - 2024-7-15",
						"jobType": "充电",
					},
					{
						"sn": "sn-0002",
						"jobCycle": "每天",
						"timePointPeriod": "00:00:00",
						"cycleDate": "-",
						"jobType": "开机",
					},
					{
						"sn": "sn-0003",
						"jobCycle": "每周",
						"timePointPeriod": "00:00:00",
						"cycleDate": "1,3,5",
						"jobType": "关机",
					},
					{
						"sn": "sn-0004",
						"jobCycle": "每月",
						"timePointPeriod": " 00:00:00",
						"cycleDate": "1,5,6",
						"jobType": "网络唤醒",
					},
					{
						"sn": "sn-0005",
						"jobCycle": "每月",
						"timePointPeriod": "00:00:00",
						"cycleDate": "5,6,8",
						"jobType": "邮件提醒",
					},
				],
				// 表单校验
				rules: {
					userName: [{
							required: true,
							message: "用户名称不能为空",
							trigger: "blur"
						},
						{
							min: 2,
							max: 20,
							message: '用户名称长度必须介于 2 和 20 之间',
							trigger: 'blur'
						}
					],
				},
			};
		},
		watch: {

		},
		created() {
			// this.getList();
			// this.getDeptTree();
			// this.getConfigKey("sys.user.initPassword").then(response => {
			// 	this.initPassword = response.msg;
			// });
		},
		methods: {
			/** 查询用户列表 */
			getList() {
				// this.loading = true;
				// listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
				// 	this.userList = response.rows;
				// 	this.total = response.total;
				// 	this.loading = false;
				// });
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.userId);
				this.single = selection.length != 1;
				this.multiple = !selection.length;
			},
			/** 修改操作 */
			handleEdit(row) {
				console.log("row=" + row);
				row.isProressShow = true;
			},
			/** 新增操作 */
			handleAdd() {
				this.$router.push("/job/add");
			},
			handleUpdateBatch() {
				console.log("row=" + row);
				row.isProressShow = true;
			},
		}
	};
</script>